/**
 * @description 该方法是用于移动端适配功能，结合淘宝的适配方案flexible + rem 实现适配，同时rem单位转化到100px，这样的话，对于开发H5页面时就只需要，移动两位小数点即可
 * @param {number} <designWidth> { 使用的标准设计稿宽度 }
 * @param {number} <rem2px> { 将rem单位转化的值 }
 * 参考文献：https://github.com/hbxeagle/rem/blob/master/README.md
 *          https://github.com/amfe/lib-flexible
 *          https://github.com/hbxeagle/rem/blob/master/HD_ADAPTER.md
 */

;(function (designWidth, rem2px) {
  var win = window
  var doc = win.document
  var docEl = doc.documentElement
  var metaEl = doc.querySelector('meta[name="viewport"]')
  var dpr = 0
  var scale = 0
  var timer = null

  if (!dpr && !scale) {
    var devicePixelRatio = win.devicePixelRatio
    if (win.navigator.appVersion.match(/iphone/gi)) {
      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
        dpr = 3
      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
        dpr = 2
      } else {
        dpr = 1
      }
    } else {
      dpr = 1
    }
    scale = 1 / dpr
  }

  console.log('dpr---scale', dpr, scale)
  docEl.setAttribute('data-dpr', dpr)
  if (!metaEl) {
    metaEl = doc.createElement('meta')
    metaEl.setAttribute('name', 'viewport')
    metaEl.setAttribute('content', 'width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no, viewport-fit=cover, shrink-to-fit=no')

    if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(metaEl)
    } else {
      var wrap = doc.createElement('div')
      wrap.appendChild(metaEl)
      doc.write(wrap.innerHTML)
    }
  }
  // else {
  //   metaEl.setAttribute('name', 'viewport')
  //   metaEl.setAttribute('content', 'width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no, viewport-fit=cover, shrink-to-fit=no')
  // }

  // 以上代码是对 dpr 和 viewport 的处理，代码来自 lib-flexible。
  var d = window.document.createElement('div')
  d.style.width = '1rem'
  d.style.display = 'none'
  docEl.firstElementChild.appendChild(d)
  var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'))
  console.log('defaultFontSize', defaultFontSize)
  d.remove()
  function refreshRem(_designWidth, _rem2px, direction) {
    // 由于 height 的响应速度比较慢，所以在加个延时处理横屏的情况。
    console.log('window.innerHeight || window.screen.height', window.innerHeight, window.screen.height)
    console.log('window.innerWidth || window.screen.width', window.innerWidth, window.screen.width)
    var height = direction === 'portrait' ? (window.innerHeight || window.screen.height) : (window.innerWidth || window.screen.width);
    console.log('-----remParams------direction', direction);
    console.log('-----remParams------height', height);
    console.log('-----remParams------_designWidth', _designWidth);
    console.log('-----remParams------_rem2px', _rem2px);
    console.log('-----remParams------defaultFontSize', defaultFontSize);
    docEl.style.fontSize = ((height / (_designWidth / _rem2px) / defaultFontSize) * 100) + '%';
    console.log('-----docEl.style.fontSize------', (height / (_designWidth / _rem2px) / defaultFontSize) * 100)
  }

  // 转屏
  var supportOrientation = (typeof window.orientation === 'number' && typeof window.onorientationchange === 'object')
  var orientation = null
  // var direction = null
  var direction = 'landscape'

  function updateOrientation() {
    if (supportOrientation) {
      orientation = window.orientation
      switch (orientation) {
        case 90:
        case -90:
          direction = 'landscape'
          break
        default:
          direction = 'portrait'
      }
    } else {
      direction = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait'
    }
  }

  // 使用延时执行，event loop
  refreshRem(designWidth, rem2px, direction)
  window.onorientationchange = function () {
      // 该方法是在手机横屏时重新计算，我们不允许横屏，所有注释掉（xiayong）
      // updateOrientation()
      refreshRem(designWidth, rem2px, direction)
  }

  // 执行缩放的时候重新执行代码
  win.addEventListener('resize', function () {
    timer && clearTimeout(timer)
    timer = setTimeout(refreshRem(designWidth, rem2px), 60)
  }, false)
  win.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      clearTimeout(timer)
      timer = setTimeout(refreshRem(designWidth, rem2px), 60)
    }
  }, false)
})(750, 100);
